<template>
  <div class="edit-popup">
    <popup
        ref="popupRef"
        :title="popupTitle"
        :async="true"
        width="550px"
        @confirm="handleSubmit"
        @close="handleClose"
    >
      <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">

        <!--                <el-form-item label="设备信息" prop="device">-->
        <!--                    <el-cascader-->
        <!--                        :options="optionsData.device"-->
        <!--                        clearable-->
        <!--                        v-model="formData.device"-->
        <!--                        filterable-->
        <!--                    />-->
        <!--                </el-form-item>-->

        <!--                <el-form-item label="科室信息" prop="department">-->
        <!--                    <el-cascader-->
        <!--                        :options="optionsData.department"-->
        <!--                        clearable-->
        <!--                        v-model="formData.department"-->
        <!--                        filterable-->
        <!--                    />-->
        <!--                </el-form-item>-->

        <el-form-item label="设备名称" prop="device_name">
          <el-input v-model="formData.device_name" clearable placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item label="设备编号" prop="device_no">
          <el-input
              v-model="formData.device_no"
              clearable
              placeholder="请输入设备编号"
          />
        </el-form-item>
        <el-form-item label="设备类型" prop="device_type">
          <el-radio-group v-model="formData.device_type">
<!--            <el-radio :label="0">水电表</el-radio>-->
            <el-radio :label="1">水表</el-radio>
            <el-radio :label="2">电表</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="设备底数">
          <el-input v-model="formData.base_number" placeholder="请输入设备底数">
            <template #append>度</template>
          </el-input>
        </el-form-item>
        <el-form-item label="设备读数">
          <el-input v-model="formData.reading" placeholder="请输入设备读数">
            <template #append>度</template>
          </el-input>
        </el-form-item>
        <el-form-item label="系数">
          <el-input v-model="formData.coefficient" placeholder="请输入设备底数">
            <template #append>-</template>
          </el-input>
        </el-form-item>
        <el-form-item label="水电价">
          <el-input v-model="formData.price" placeholder="请输入水电价">
            <template #append>元</template>
          </el-input>
        </el-form-item>
<!--        <el-form-item label="电梯费">-->
<!--          <el-input v-model="formData.lift_fee" placeholder="请输入电梯费">-->
<!--            <template #append>元</template>-->
<!--          </el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="二次加压费">-->
<!--          <el-input v-model="formData.second_pressure_fee" placeholder="请输入二次加压费">-->
<!--            <template #append>元</template>-->
<!--          </el-input>-->
<!--        </el-form-item>-->
        <!--                <el-form-item label="排序">-->
        <!--                    <el-input-number v-model="formData.sort" :min="1" />-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="状态" required prop="status">-->
        <!--                    <el-radio-group v-model="formData.status">-->
        <!--                        <el-radio :label="1">显示</el-radio>-->
        <!--                        <el-radio :label="0">隐藏</el-radio>-->
        <!--                    </el-radio-group>-->
        <!--                </el-form-item>-->
      </el-form>
    </popup>
  </div>
</template>

<script lang="ts" setup name="roomDepartmentDeviceEdit">
import type {FormInstance} from 'element-plus'
import Popup from '@/components/popup/index.vue'
import {
  apiRoomDepartmentDeviceAdd,
  apiRoomDepartmentDeviceEdit,
  apiRoomDepartmentDeviceDetail,
  roomDeviceAll,
  departmentAll, apiRoomDepartmentDeviceSave
} from '@/api/room/room_department_device'
import {useDictOptions} from '@/hooks/useDictOptions'
import {timeFormat} from '@/utils/util'
import feedback from '@/utils/feedback'
import type {PropType} from 'vue'

defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')

const {optionsData} = useDictOptions<{
  device: any[]
  department: any[]
}>({
  device: {
    api: roomDeviceAll
  },
  department: {
    api: departmentAll
  }
})

// 弹窗标题
const popupTitle = computed(() => {
  return mode.value == 'edit' ? '编辑科室设备' : '新增科室设备'
})

// 表单数据
const formData = reactive({
  id: '',
  status: 1,
  sort: 1,
  device_sn: '',
  base_number: 0,
  reading: 0,
  price: 0,
  coefficient: 0,
  lift_fee: 0,
  second_pressure_fee: 0,
  department: [],
  device: [],
  device_name: "",
  device_no: "",
  device_type: 2,
  is_init: 0
})

// 表单验证
const formRules = reactive<any>({
  device: [
    {
      required: true,
      message: '请选择设备信息',
      trigger: ['blur']
    }
  ],
  department: [
    {
      required: true,
      message: '请选择科室信息',
      trigger: ['blur']
    }
  ],
  name: [
    {
      required: true,
      message: '请输入设备名称',
      trigger: ['blur']
    }
  ]
})

// 获取详情
const setFormData = async (data: Record<any, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key]
    }
  }
}

const getDetail = async (row: Record<string, any>) => {
  const data = await apiRoomDepartmentDeviceDetail({
    id: row.id
  })
  setFormData(data)
}

// 提交按钮
const handleSubmit = async () => {
  await formRef.value?.validate()
  const data = {...formData}
  if (mode.value == 'edit') {
    if (formData.is_init == 0) {
      await feedback.confirm(
          '您当前尚未初始化，编辑只能修改相关内容，初始化后再编辑即可重新计算？'
      )
    }
    await apiRoomDepartmentDeviceEdit(data)
  } else {
    await apiRoomDepartmentDeviceAdd(data)
  }
  popupRef.value?.close()
  emit('success')
}

//打开弹窗
const open = (type = 'add') => {
  mode.value = type
  popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
  emit('close')
}

defineExpose({
  open,
  setFormData,
  getDetail
})
</script>
